<template>
	<view class="content">
		<u-navbar
		          title="科室主页"
		          :autoBack="true"
		      >
		      </u-navbar>
		<view class="dep_card" v-if="frozen">
			<view class="dep_title">
				<view class="title_left">
					<view class="title_dep">{{depObj.dept_name}}</view>
					<view class="title_icon my_icon" v-for="(v,k) in depObj.label" :key="k">{{v}}</view>
				</view>
				<view class="title_right focus" v-if="focus == true" @click="subscription()">
					已关注
				</view>
				<view class="title_right " v-if="focus == false" @click="subscription()">
					+&nbsp;关注
				</view>
			</view>
			<view class="hosp_title" v-if="depObj.plat_hospital_name">
				{{depObj.plat_hospital_name}}
			</view>
			<view class="notice" @click="goNotice()" v-if="noticeDetails">
				科室公告>
			</view>
			<view class="intro" @click="goDetails" v-if="depObj.detail">
				<span style="color: black;">科室简介：</span>
				<view>
					{{depDot(depObj.detail,45)}}<span v-if="depObj.detail.length > 45"  style="color:#4581F6">查看更多</span>
				</view>
				<!-- <text-elp number="40" :text=""></text-elp> -->
			</view>
		</view>
		<view class="card_day">
			<view class="card_all" v-if="depOrderList.length > 0" @click="getAllDoc">
				全部
			</view>
			<scroll-view style="width: 79%;white-space: nowrap;" scroll-x="true">
				<view class="card_box">
					<!-- 	<view class="card_box_all">
						全部
					</view> -->
					<view class="card_box_list">
						<view class="card_box_list_item" v-for="(v,k) in depOrderList" :key="k">
							<view class="card_content" @click="pickDay(v)">
								<view class="card_content_top">
									{{v.week}}
								</view>
								<view class="card_content_center">
									{{days(v.date)}}
								</view>
								<view class="card_content_bottom" v-if="hasHao(v.isHaveSource) !== '无号'">
									{{hasHao(v.isHaveSource)}}
								</view>
							</view>
							<view class="mark_left" v-if="v.date == currentDay"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="list" v-for="v in docList" :key="v.doctorId">
			<view class="card" @click="goDoctor(v)">
				<view class="icon">
					<!-- <u--image :showLoading="true" :src="log_pic" shape="circle" width="90rpx" height="90rpx"></u--image> -->
					<u-avatar :src="v.avatar" size="45" shape="circle" :default-url="log_pic"></u-avatar>
				</view>
				<view class="intro">
					<view class="name">{{v.doctor_name}}<span class="position">{{v.doctor_title}}</span></view>
					<view class="position_hosp">
						{{depObj.plat_hospital_name}}
					</view>
					<view class="brand">
						<view class="brand_list" v-for="value in v.label">
							{{value}}
						</view>
					</view>
					<view class="good_at" v-if="v.good_at">
						{{depDot(v.good_at,35)}}<span v-if="v.good_at.length > 35"  style="color:#4581F6">查看更多</span>
						<!-- <text-elp number="40" :text="v.good_at"></text-elp> -->
					</view>
					<view class="grace">
						<view class="brand_good_rate" v-if="v.all.score">
							<view class="price">
								评价
							</view>
							<view class="star">
								<u-rate :value="v.all.score / 2" count="5" active-color="#F0A84D"
									inactive-color="#b2b2b2" gutter="5" readonly :allowHalf="true"></u-rate>
							</view>

						</view>
						<!-- <view class="brand_good_rate">
							预约<span class="rate_orange">888</span>
						</view>
						<view class="brand_good_rate">
							关注<span class="rate_orange">888</span>
						</view> -->
					</view>
				</view>
			</view>
			<view class="mark_rightTop" v-if="v.isHaveSource == true">
				有号
			</view>
			<view class="mark_rightTop_no" v-if="v.isHaveSource == false">
				无号
			</view>
		</view>
		<view style="padding:30rpx 0 50rpx 0;">
			<u-loadmore :status="pageStatus" v-if="docList.length > 0" />
		</view>
		<view v-if="docList.length < 1" style="margin-top: 100rpx;padding-bottom: 300rpx;">
			<u-empty mode="data" iconSize="90" textSize="18" :icon="emptyList" text="当前日期暂无医生" v-if="showEmp"></u-empty>
		</view>
		<view class="pop">
			<u-popup :show="noticePop" :title="noticeTitle">
				<view class="btn_close" @click="noticePop = false">
					<u-icon name="close-circle" size="26"></u-icon>
				</view>
				<view class="slot-content">
					<rich-text :nodes="noticeDetails"></rich-text>
				</view>
				<view>
					<u-empty mode="data" iconSize="80" :icon="emptyList" textSize="18" text="暂无预约规则"
						v-if="noticeDetails == ''"></u-empty>
				</view>
			</u-popup>
		</view>
	</view>



</template>

<script>
	import {
		getDepartmentInfo,
		getDepartmentIndexDates,
		getDoctorsByDay,
		UserSubscribe,
		IsUserSubscribe,
		UserUnSubscribe,
		getDoctorFocus,
		getDoctorsByDayALL
	} from '@/api/home/search.js'
	import homeApii from '@/api/homee'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				log_pic: require('@/static/icons/yimo.png'),
				docSrc: '',
				brand: ['挂号', '专病'],
				focus: false,
				depObj: {}, //科室信息
				depOrderList: [], //预约日期
				currentDay: '', //当前选中日期
				departmentId: '', //当前科室id
				docList: [], //医生列表
				noticePop: false,
				noticeDetails: '', //内容 //科室公告详情
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				showEmp: false,
				frozen:false,
				ticker: null,
				pageNumber: 1,
				lastPage: false,
				pageStatus: 'loadmore'
			};
		},
		methods: {
			//弹出层
			goNotice() {
				uni.navigateTo({
					url: '/pages/sousuo/search_dep_details/notice'
				})
			},

			subscription() {
				this.focus = !this.focus
				if (this.focus) uni.$u.toast('已关注')
				if (!this.focus) uni.$u.toast('已取消关注')
			},
			async depInfo(id) {
				//console.log(id);
				
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await getDepartmentInfo(id)
				uni.hideLoading()
				console.log(res,'res');
				this.depObj = res.data
				this.$store.state.doc.depDetailsInfo = res.data.detail
				this.$store.state.doc.depNotice = res.data.notice
			},
			async depDataList(id) { //预约日期
				//console.log(id);
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.frozen = false
				let res = await getDepartmentIndexDates(id)
				this.frozen = true
				if(res.code == 4001){
					uni.reLaunch({
						url:'/pages/sousuo/no_found/no_found'
					})
					return
				}
				uni.hideLoading()
				this.depOrderList = res.data
				//this.currentDay = res.data[0].date //第一次加载，默认选中第一个日期
				let currRes = res.data.findIndex((v) => {
					return v.isHaveSource == true
				})
				if (currRes !== -1) {
					this.currentDay = res.data[currRes].date //第一次加载，默认选择有数据的
				} else {
					this.currentDay = res.data[0].date //第一次加载，默认选中第一个日期,在全部列表为空的情况下
				}
				//console.log(res.data,12000);
				//console.log(this.depOrderList);
				// this.depObj = res.data
				// this.$store.state.doc.depNotice = res.data.detail
			},
			// 是否是今天
			// const isToday = (date) => {
			// 	const now = new Date()
			// 	return isThisMonth(date) && date.getDate() == now.getDate()
			// }
			// 是否本周
			isThisWeak(date) {
				const now = new Date()
				if (this.isThisMonth(date)) {
					if (now.getDay() - date.getDay() > 0 && now.getDate() - date.getDate() < 7) {
						return true
					}
				} else {
					return false
				}
			},
			// 是否是今年
			isThisYear(date) {
				const now = new Date()
				return date.getYear() == now.getYear()
			},
			// 是否是今月
			isThisMonth(date) {
				const now = new Date()
				return this.isThisYear(date) && date.getMonth() == now.getMonth()
			},
			//判断是否关注
			async isFollow() {
				let data = {
					contentId: this.departmentId //用户关注的内容id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await IsUserSubscribe(data)
				uni.hideLoading()
				if (res.data.flag) {
					this.focus = true
				} else {
					this.focus = false
				}
			},
			//点击关注
			async subscription() {
				//this.focus = !this.focus
				//是否关注
				await this.isFollow()
				//没有关注的点击后进行关注，已关注的点击后取消关注
				if (this.focus) {
					let param = {
						id: this.departmentId //用户关注的内容id
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let focus = await UserUnSubscribe(param)
					uni.hideLoading()
					this.focus = false
					uni.$u.toast('已取消关注')
					return
				}
				if (!this.focus) {
					let params = {
						contentId: this.departmentId, //用户关注的内容id
						content: this.depObj.dept_name, //关注的内容
						contentType: 2, //内容类型 0：未知 1:医院 2:科室 3:专家 4:疾病 5:文章
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let focus = await UserSubscribe(params)
					uni.hideLoading()
					this.focus = true
					uni.$u.toast('已关注')
				}
			},
			goDoctor(params) {
				// console.log(params);
				// return
				uni.navigateTo({
					url: `/pages/docinfo/docinfo?doctorId=${params.doctorId}`
				})
			},
			goDetails() {
				uni.navigateTo({
					url: `/pages/sousuo/search_dep_details/dep_info`
				})
			},
			async dateList(id, time) {
				let params = {
					'childdeptId': id,
					'time': time,
					'pageNumber': this.pageNumber
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await getDoctorsByDay(params)
				uni.hideLoading()
				if(res.data.lastPage){
					this.pageStatus = 'nomore'
				}else{
					this.pageStatus = 'loadmore'
				}
				this.docList = res.data.list
				this.lastPage = res.data.lastPage
				if (this.docList.length > 0) {
					this.docList.map((v) => {
						let doctorId = v.doctorId
						let doctorCode = v.doctorCode
						let res = getDoctorFocus({
							'doctorId': doctorId,
							'doctorCode': doctorCode
						})
						res.then(result => {
							v.all = result.data
						})
						return v
					})
					//console.log(Object.values());
				}

				//获取当前日期的列表
			},

			async loadPage() {
				if (!this.lastPage) { //不是最后一页就能翻页
					this.pageNumber++
					let params = {
						'childdeptId': this.departmentId,
						'pageNumber': this.pageNumber,
						'time': this.currentDay
					}
					//console.log(params,112211);
					//state.currentPage = ++state.currentPage
					if (this.currentDay == '') {
						let res = await getDoctorsByDayALL(params)
						this.docList.push(...res.data.list)
						this.lastPage = res.data.lastPage
						this.pageStatus = 'loadmore'
					} else {
						//console.log(123,this.currentDay);
						let res = await getDoctorsByDay(params)
						this.docList.push(...res.data.list)
						this.lastPage = res.data.lastPage
						this.pageStatus = 'loadmore'
					}
					//这里写关注的星星
					if (this.docList.length > 0) {
						let start = this.docList.length - 5
						let end = this.docList.length
						this.docList.map((value, key) => {
							if (key >= start && key <= end) {
								let res = getDoctorFocus({
									'doctorId': value.doctorId,
									'doctorCode': value.doctorCode
								})
								res.then(result => {
									value.all = result.data
								})
								//console.log(res, 'rrrrr');
								return value
							}
						})
						//}

						//console.log(Object.values());
					}
				} else {
					this.pageStatus = 'nomore'
				}
			},
			async getAllDoc() {
				this.pageNumber = 1
				this.currentDay = ''
				this.pageStatus = 'loadmore'
				this.dateList(this.departmentId, '')
			},
			async pickDay(params) {
				if (!params.isHaveSource) {
					uni.$u.toast('当所选日期暂无医生')
					return
				}
				this.pageStatus = 'loadmore'
				this.currentDay = params.date
				this.pageNumber = 1
				this.dateList(this.departmentId, this.currentDay)
			},
			//...mapMutations(['GETTOKEN']),
			onReachBottom() {
				this.loadPage()
			},
			getToken() {
			// 	return new Promise((resolve, reject) => {
			// 		my.getAuthCode({
			// 			scopes: 'auth_base',
			// 			success: res => {
			// 				const authCode = res.authCode;
			// 				homeApii.getopenid({
			// 					code: authCode
			// 				}).then(res => {
			// 					//console.log(res,'storeToken')
			// 					if (res.code == 4000) {
			// 						uni.setStorageSync("token", res.data.token)
			// 						this.$store.state.doc.token = res.data.token
			// 					}
			// 					resolve(true)
			// 				})
			// 			},
			// 			fail: err => {
			// 				console.log('my.getAuthCode 调用失败storeToken', err)
			// 			}
			// 		});
			// 	})
			}
		},
		computed: {
			hasHao() {
				return (value) => {
					if (value) {
						return '有号'
					}
					return '无号'
				}
			},
			depDot() {
				return (value, number) => {
					if (value && value.length > number) {
						let res = ''
						res = value.slice(0, number) + '...'
						return res
					}
					return value
				}
			},
			days() {
				return (dateTime) => {
					let date = new Date(dateTime);
					//console.log(date);
					return date.getDate().toString()
				}
			},
			// deptName(){
			// 	return this.depObj.dept_name
			// }
			// isToday() {
			// 	return (value) => {
			// 		let date = new Date(value);
			// 		const now = new Date()
			// 		return this.isThisMonth(date) && date.getDate() == now.getDate()
			// 	}
			// }
		},
		onShareAppMessage() {
			return {
				title: this.depObj.dept_name || '', // 标题
				desc: this.depObj.detail || this.depObj.dept_name , // 描述
				path: `pages/sousuo/search_dep_details/index?departmentId=${this.departmentId}`, // 分享的小程序页面
				success(res) {
					console.log('success', res);
				},
				fail(res) {
					console.log('fail', res)
				}
			}
		},
		async onLoad(params) {
			let token = uni.getStorageSync("token")
			//if (!token) {
				await this.getToken()
			//}
			this.departmentId = params.departmentId //先把id存起来
			await this.depInfo(params.departmentId) //科室信息
			// my.setNavigationBar({
			// 	title: this.depObj.dept_name || ''
			// })
			await this.depDataList(params.departmentId) //有号无号列表
			//getAllDoc
			await this.getAllDoc()
			//await this.dateList(params.departmentId,this.currentDay) //当前日期列表
			await this.isFollow()
			if (this.depObj.status == 2) {
				this.noticeDetails = this.depObj.extra_notice
				this.noticePop = true
			}
			// my.setNavigationBar({
			// 	title: this.depObj.dept_name,
			// })
			//console.log(params,12111);
		},
		onShow() {
			// my.setNavigationBar({
			// 	title: this.depObj.dept_name,
			// })
			//console.log(12222);
			setTimeout(() => {
				this.showEmp = true
			}, 1500)
			// my.setNavigationBar({
			// 	title: '河南省预约挂号',
			// })
		},
		beforeDestroy() {
			//clearInterval(this.ticker)
			//console.log('beforeDestroy');
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F5F6F8;
		padding-top: 180rpx;

		.dep_card {
			background-color: #fff;
			margin: 30rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;
			padding-bottom: 30rpx;
			.dep_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;

				.title_left {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					width: 500rpx;
					padding-top: 8rpx;

					.title_dep {
						flex-shrink: 0;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
						margin-top: 10rpx;
					}

					.my_icon {
						flex-shrink: 0;
						font-size: 18rpx;
						font-weight: 400;
						line-height: 20rpx;
						padding: 8rpx 8rpx 12rpx 8rpx;
						margin-left: 18rpx;
						border-radius: 8rpx;
						margin-top: 10rpx;
					}

					//偶数
					.title_icon:nth-child(even) {
						color: #EB7637;
						background-color: #FDE2D2;

					}

					//奇数
					.title_icon:nth-child(odd) {
						color: #3F80FF;
						background-color: #EAEFFF;
					}
				}

				.title_right {
					font-size: 20rpx;
					font-weight: 400;
					color: #4581F6;
					//line-height: 28rpx;
					background-color: #F3F6FF;
					padding: 12rpx 20rpx;
					border-radius: 30rpx;
				}

				.focus {
					background-color: #f7f7f7;
					color: #888;
				}
			}

			.hosp_title {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}

			.notice {
				font-size: 24rpx;
				font-weight: 400;
				color: #4581F6;
				line-height: 34rpx;
				margin-top: 10rpx;
				padding-bottom: 24rpx;
			}

			.intro {
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
				line-height: 34rpx;
				margin-top: 8rpx;
				padding-bottom: 24rpx;
			}
		}

		.card_day {
			margin-left: 30rpx;
			display: flex;

			.card_all {
				flex-shrink: 0;
				width: 74rpx;
				height: 140rpx;
				border-radius: 10rpx;
				background: #4581F6;
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 140rpx;
				padding-left: 20rpx;
				//padding-right: 20rpx;
			}

			.card_box {
				display: flex;
				align-items: center;

				.card_box_list {
					margin-left: 6rpx;
					display: flex;

					.card_box_list_item {
						display: inline-block;
						position: relative;
						margin-left: 4rpx;
						width: 94rpx;
						height: 140rpx;
						background: #FFFFFF;
						border-radius: 10rpx;

						.card_content {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.card_content_top {
								font-size: 20rpx;
								font-weight: 400;
								color: #3D3D3D;
								line-height: 14px;
								padding: 10rpx 0 12rpx 0;
							}

							.card_content_center {
								font-size: 28rpx;
								font-weight: 400;
								color: #3D3D3D;
								line-height: 40rpx;
								padding-bottom: 4rpx;
							}

							.card_content_bottom {
								padding-top: 8rpx;
								font-size: 16rpx;
								font-weight: 400;
								color: #4581F6;
								line-height: 11px;
								text-align: center;
								width: 28px;
								height: 15px;
								background: #EFF7FF;
								border-radius: 3px;
							}
						}

						.mark_left {
							position: absolute;
							top: 0;
							left: 0;
							width: 22rpx;
							height: 22rpx;
							border-radius: 20rpx 0 80rpx 0;
							background-color: #4581F6;
						}

					}
				}
			}
		}


		.list {
			background-color: #fff;
			padding-top: 40rpx;
			padding-bottom: 30rpx;
			padding-left: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			position: relative;

			.card {
				display: flex;
				.icon {
					margin-right: 10rpx;
				}

				.intro {
					.name {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}

					.position {
						margin-left: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}

					.position_hosp {
						margin: 10rpx 0;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}

					.good_at {
						font-size: 24rpx;
						font-weight: 400;
						color: #73737D;
						line-height: 40rpx;
						margin-right: 40rpx;
					}

					.grace {
						display: flex;
						margin-top: 8rpx;

						.brand_good_rate {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 400;
							margin-right: 16rpx;
							color: #73737D;
							line-height: 30rpx;

							.price {
								padding-top: 8rpx;
								font-size: 24rpx;
								line-height: 30rpx;
							}

							.star {
								line-height: 30rpx;
							}

							.rate_orange {
								color: #EB7637;
								padding: 0 8rpx;
							}
						}

					}
				}

				.brand {
					display: flex;

					.brand_list {
						//margin-top: 16rpx;
						margin-right: 18rpx;
						margin-bottom: 16rpx;
						padding: 6rpx 8rpx 6rpx 8rpx;
						font-size: 22rpx;
						color: #0F91F7;
						font-weight: 400;
						line-height: 24rpx;
						text-align: center;
						background: #EFF7FF;
						border-radius: 2px 2px 2px 2px;
					}
				}
			}

			.mark_rightTop {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 22rpx;
				width: 60rpx;
				height: 30rpx;
				text-align: center;
				background: #43C163;
				padding-top: 8rpx;
				border-radius: 0px 20rpx 0px 20rpx;
			}

			.mark_rightTop_no {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 22rpx;
				width: 60rpx;
				height: 30rpx;
				text-align: center;
				background: #C4C4C4;
				padding-top: 8rpx;
				border-radius: 0px 20rpx 0px 20rpx;
			}
		}

		.pop {
			.btn_close {
				display: flex;
				justify-content: flex-end;
				margin: 15rpx 20rpx 0 0;
			}

			.slot-content {
				padding: 0 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #3D3D3D;
				line-height: 40rpx;
				text-align: justify;
			}
		}

		.popupShow {
			overflow: hidden;
			position: fixed;
			width: 100%;
		}
	}
</style>